<template>
  <div class="popup">
    <div class="zh-overlay"></div>
    <div class="zh-popup" v-if="!popupVisible" style="hieght:30%">

    </div>
  </div>
</template>

<script>
export default {
  props: ['fatherVisible'],
  data () {
    return {
      popupVisible: true
    }
  },
  watch: {
    fatherVisible (flag) {
      this.popupVisible = flag
    },
    popupVisible (flag) {
      this.$emit('update:fatherVisible', flag)
    }
  }
}
</script>

<style lang="less" scoped>
  .popup {
    .zh-popup {
      position: fixed;
      max-height: 100%;
      background: #fff;
    }
    .zh-popup--bottom {
      bottom: 0px;
      left: 0px;
      width: 100%;
    }
    .zh-popup--top {
      top: 0px;
      left: 0px;
      width: 100%;
    }
  }
</style>
